<template>
  <div class="left-table">
    <el-table
            :data="playersRating"
            :row-style='tableRowStyle'
            :header-cell-style="tableHeaderColor"
            style="width: 450px">
      <el-table-column
              prop="number"
              label=""
              width="46">
      </el-table-column>
      <el-table-column
              prop="playerName"
              label="球员"
              width="180">
        <template slot-scope="scope">
          <div class="player-box">
            <img class="player-img" :src="scope.row.playerImg" alt="">
            <span class="player-name myColumn" @click="enterPlayer(scope.row.playerId)">{{scope.row.playerName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="type"
              label="类型"
              width="143">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.type" class="item" effect="dark" :content="typeExplain[scope.row.type]" placement="top">
            <span >{{scope.row.type}}</span>
          </el-tooltip>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
              prop="rating"
              label="评分"
              width="81">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "RatingTable",
    props:{
      playersRating:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data(){
      return {
         //球员风格类型解释
         typeExplain:{
           '得分手':'专注于得分的前锋',
           '影锋':'需要参与球队组织，承担拿球推进任务的前锋',
           '机动型前锋':'活动范围大，经常拉边的前锋',
           '站桩中锋':'需要参与球队组织，承担拿球推进任务的前锋',
           '防守型中场':'善于拦截、抢断和对抗的中场球员',
           '边中场':'活动范围大，善于边路活动的中场球员',
           '边锋':'善于在边路拿球突破射门或传中的球员',
           '内锋':'善于在边路拿球进行组织，并向中路推进的球员',
           '边翼卫':'承担球队边路进攻，同时兼顾防守的进攻型边后卫',
           '边后卫':'专注于防守的边后卫',
           '控球型中后卫':'承担球队后场拿球、出球任务的中后卫',
           '防守型中后卫':'专注于防守的中后卫',
           '组织核心':'承担球队主要组织任务的中场球员',
         }
      }
    },
    methods:{
      //设置表格行的样式
      tableRowStyle({row,rowIndex}){
        return {'background-color':'#F1F6F9'}
      },
      //设置表头的样式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return {'background-color':'#F1F6F9'}
      },
      //点击球员进入具体球员
      enterPlayer(playerId){
        this.$router.push({ name: 'singlePlayer', params:{playerId}})
      }
    }
  }
</script>

<style scoped>

  .player-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .player-img {
    /*margin-left:15px;*/
    width: 25px;
    height: 25px;
  }
  .player-name {
    margin-left:5px;
  }
  .left-table {
   width: 50%;
 }
  .left-table /deep/ .el-table td {
   padding: 15px 0 ; /*no*/
   background-color: #F1F6F9;
   /*background-color: red;*/
   border-bottom:1px solid white ;
   font-weight: bold;
   font-size: 20px;
   text-align: center;
 }
  .left-table /deep/ .is-leaf {
   text-align: center;
   font-size: 20px;
   padding: 8px 0 ; /*no*/
 }
</style>